<template>
    <div>
        <div style="padding: 10px;">
            <div style="margin: 10px;">
                <Form :ref="pageInfo.searchFormRef" :model="pageInfo.searchFormData" inline :label-width="100">
                    <FormItem label="用户名" prop="name">
                        <Input type="text" v-model="pageInfo.searchFormData.name" placeholder="">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSearchSubmit">搜索</Button>
                        <Button @click="handleSearchReset" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </div>
            <div>
                <Table border :columns="columns" :data="data"></Table>
            </div>
            <div style="margin: 10px;">
                <Page @on-change="handlerPageChange" :total="pageInfo.count" :current="pageInfo.page" :page-size="pageInfo.perPage" show-total/>
            </div>
        </div>
        
        <!--角色分配-->
        <div>
            <Modal
                    v-model="assignRoleModal.show"
                    :title="assignRoleModal.title"
                    footer-hide
                    @on-cancel="assignRoleModal.show = false"
                    width=455
            >
                <Transfer
                        :data="assignRoleModal.roleData"
                        :target-keys="assignRoleModal.roleSelectData"
                        filterable
                        :filter-method="filterRoleMethod"
                        @on-change="handleRoleChange"
                        :titles="assignRoleModal.transferTitles"
                >
                </Transfer>
                
                <div style="padding: 10px;">
                    <Button long type="primary" @click="handlerUserRoleAssign">提交保存角色分配</Button>
                </div>
            
            </Modal>
        </div>
    </div>
</template>

<script>
    import rbacUtl from '../auth-route-utl'
    import RbacRolePage from "./rbacRolePage";
    
    export default {
        name      : "rbacUserPage",
        components: {RbacRolePage},
        data() {
            return {
                assignRoleModal: {
                    show          : false,
                    title         : '用户角色分配',
                    transferTitles: ['未选角色', '已选角色'],
                    roleData      : [],//必要属性key和label
                    roleSelectData: [],//存储角色id数组
                },
                pageInfo       : {
                    page          : 1,
                    perPage       : 10,
                    count         : 0,
                    conditions    : [],
                    searchFormData: {
                        name: '',
                    },
                    searchFormRef : 'searchFormRef',
                },
                columns        : [
                    {
                        title: 'id',
                        key  : 'id',
                        width: 100
                    },
                    {
                        title: '名称',
                        key  : 'name',
                    },
                    {
                        title: '邮箱',
                        key  : 'email',
                    },
                    {
                        title : '操作',
                        key   : 'action',
                        width : 250,
                        align : 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on   : {
                                        click: () => {
                                            this.showRole(params)
                                        }
                                    }
                                }, '角色分配'),
                            ]);
                        }
                    }
                ],
                data           : [],
            }
        },
        methods   : {
            handleSearchSubmit() {
                this.pageInfo.page       = 1;
                this.pageInfo.conditions = [];
                let searchUserName       = this.pageInfo.searchFormData.name.replace(new RegExp(/( )/g), '');
                if (searchUserName) {
                    this.pageInfo.conditions = [{
                        field_name: "name",
                        field_type: "text",
                        type      : 3,
                        value     : searchUserName
                    }];
                }
                
                this.getUserPageData();
            },
            handleSearchReset() {
                this.$refs[this.pageInfo.searchFormRef].resetFields();
                this.pageInfo.conditions = [];
                this.pageInfo.page       = 1;
                this.getUserPageData();
            },
            handlerPageChange(page) {
                this.pageInfo.page = page;
                this.getUserPageData();
            },
            showRole(params) {
                this.assignRoleModal.show           = true;
                this.assignRoleModal.roleData       = [];
                this.assignRoleModal.roleSelectData = [];
                
                this.handlerUserRoleAssign = () => {
                    rbacUtl.request(
                        {
                            url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.updateUserRoleAssign.replace('{id}', params.row.id)),
                            method: 'put',
                            data  : {
                                roles: this.assignRoleModal.roleSelectData,
                            },
                        },
                        (res) => {
                            this.$Message.success('角色权限分配成功');
                        }
                    );
                };
                
                //每次都获取用户角色信息，小操作，不进行缓存，获取最新角色
                this.getAllNormalRoleData(() => {
                    this.getUserRoleData(params.row.id);
                });
            },
            getUserPageData() {
                rbacUtl.request(
                    {
                        url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.getUserPage),
                        method: 'post',
                        data  : {
                            page_info : {
                                page    : this.pageInfo.page,
                                per_page: this.pageInfo.perPage
                            },
                            conditions: this.pageInfo.conditions
                        },
                    },
                    (res) => {
                        if (res.data.data) {
                            this.data           = res.data.data.total_count ? res.data.data.list : [];
                            this.pageInfo.count = res.data.data.total_count;
                        } else {
                            this.$Message.error('获取数据失败');
                        }
                    }
                );
            },
            getAllNormalRoleData(successFn) {
                rbacUtl.request(
                    {
                        url: rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.getAllNormalRole),
                    },
                    (res) => {
                        this.assignRoleModal.roleData = res.data.data.map((roleInfo) => {
                            return {
                                key  : roleInfo.id,
                                label: roleInfo.name,
                            };
                        });
                        
                        successFn();
                    }
                );
            },
            getUserRoleData(id) {
                rbacUtl.request(
                    {
                        url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.getUserRole.replace('{id}', id)),
                        method: 'get',
                    },
                    (res) => {
                        let roleIdList = res.data.data;
                        
                        this.assignRoleModal.roleSelectData = roleIdList;
                    }
                );
            },
            handleRoleChange(newTargetKeys) {
                this.assignRoleModal.roleSelectData = newTargetKeys;
            },
            filterRoleMethod(data, query) {
                return data.label.indexOf(query) > -1;
            },
            handlerUserRoleAssign() {},//在角色分配时被改写
        },
        created() {
            this.getUserPageData();
        },
    }
</script>

<style scoped>

</style>